<template>
  <view id="task-data">
    <view class="data-area">
      <van-panel title="单位数据统计" desc="统计单位数据信息">
        <view class="home-card">
            <view class="each-card category-card card-100" v-for="item in addCustomer" :key="item.id" @click="cardClick(item.id)">
              <span class="count-number">{{item.count}}</span>
              <span class="count-name">{{item.value}}</span>
            </view>
        </view>
      </van-panel>
    </view>
  </view>
</template>

<script>
import {reqCompanyData} from "../../api/user";

export default {
name: "companyData",
  data () {
    return {
      addCustomer: [{
        id: 1,
        value: '单位人员总数',
        count: 0,
      }, {
        id: 2,
        value: '人员占比',
        count: 0,
      }, {
        id: 3,
        value: '公司综合评分',
        count: 0,
      }]
    }
  },
  methods: {
    cardClick (id) {
      if (id === 1){
        uni.navigateTo({
          url: '/pages/user/user?companyId=' + this.$store.state.user.userDetail.id
        })
      }
    },
    getData () {
      reqCompanyData({
        id: this.$store.state.user.userDetail.id
      }).then(res => {
        const data = res.data.messageBody;

        this.addCustomer[0].count = data.companyUsers;
        this.addCustomer[1].count = data.userCount
        this.addCustomer[2].count = data.marks;
      })
    }
  },
  mounted () {
    this.getData();
  }
}
</script>

<style lang="less">
#task-data {
  background: #F7F8FA;
  min-height: 100vh;
  text-align: center;
}
#task-data .task-transition{
  width: 100%;
}
#task-data .home-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0.5rem 0 0.5rem;
  background: #F7F8FA;
}
#task-data .home-card .each-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 0.4rem;
  width: 32%;
  height: 5.5rem;
  margin: 0.4rem 0;
}
#task-data .home-card .each-card .count-number {
  font-weight: bold;
  font-size: 2.44rem;
}
#task-data .home-card .each-card .count-number img {
  width: 1.8rem;
  height: 1.8rem;
}
#task-data .home-card .each-card .count-name {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #909399;
}
#task-data .home-card .card-1 {
  width: 48.5% !important;
}
#task-data .home-card .card-3 {
  width: 32% !important;
}
#task-data .home-card .card-100 {
  width: 99% !important;
}
#task-data .home-card .category-card {
  width: 23%;
  height: 8.5rem;
}
#task-data ul {
  width: 100%;
}
</style>